<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3_新增2D旋转，多重变换</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            border: 1px solid red;
        }
        /*.div1{*/
        /*    transform: rotate(20deg)*/
        /*}*/

        .div1{
            transform: translate(50%,50%) rotate(20deg)
        }
    </style>
</head>
<body>
<!--
    2D旋转：
        2D旋转是指：让元素在二维平面内，顺时针或逆时针旋转，具体使用方式如下
            1.先给元素添加转换属性 transform
            2,编写transform的具体值，相关可选值如下：
                rotate(deg):旋转指定的角度，正数表示顺时针旋转，负数表示逆时针旋转。
        注意：rotateZ（20deg）相当于 rotate(20deg)，当然到了3D的时候，还能写:rotate(x,y,z)。

    多重变换：
        多重变换，可以同时使用一个transform来编写
          transform: translate(50%,50%) rotate(20deg)
     注意点：多重变换时，建议最后写旋转。
-->
    <div class="div1">1</div>

</body>
</html>